<template>
  <div id='tmpl'>
      <div class="cate">
          <ul v-bind="{style:'width:'+ulwidth+'px'}">
              <li>全部</li>
              <li v-for="(item,index) in cateList" :key="index">{{item.title}}</li>
          </ul>
      </div>
      <div class="imglist">
          <ul>
            <li v-for="(item,index) in imgList" :key="index">
                <img v-lazy="item.img_url">
                <div class="descript">
                    <h4>{{item.title}}</h4>
                    <p v-text="item.zhaiyao"></p>
                </div>
            </li>
          </ul>
      </div>
  </div>
</template>
<script>
import {Toast} from "mint-ui"
export default {
  name: "component_name",
  data () {
    return {
        cateList: [],
        ulwidth:0,
        imgList:[]
    };
  },
  created(){
      this.cate();
      this.getimgList();
  },
  methods:{
      cate(){
          var url=`/api/getimgcategory`
          this.$axios.get(url).then(res=>{
              //console.log(res)
              var data=res.data;
              if(data.status!=0){
                  Toast(data.message);
                  return 
              };
              this.cateList=data.message;
              var count=this.cateList.length+1;
              var width=80;
              this.ulwidth=width*count;
          })
      },
      getimgList(cateid=0){
          var url=`/api/getimages/${cateid}`;
          this.$axios.get(url).then(res=>{
              console.log(res);
              var data=res.data;
              if(data.status!=0){
                  Toast(data.message);
                  return;
              }
              this.imgList=data.message;
          })
      }
  }
}
</script>
<style lang="less" scoped>
    .cate{
        width: 375px;
        max-width: 375px;
        overflow-x: auto;
        ul{
        margin: 0;
        padding: 0;
            li{
                cursor: pointer;
                display: inline-block;
                list-style: none;
                padding: 6px 10px;
                color: #0094ff;
                font-size: 14px;
            }
        }
    }
    .imglist ul{
        list-style: none;
        li{
            position: relative;
           
            img{
            width: 100%;
            height: 300px;
            }
            .descript{
                position: absolute;
                margin: 0;
                padding: 0;
                left: 0;
                bottom: 0;
                background-color: rgba(0,0,0,.5);
                h4{
                     color: #fff;
                     font-weight: normal;
                }
                p{
                    color: #fff;
                }
            }
        }
        
    }
   
</style>